<template>
  <div class="got-password">
    <div class="reg-header">
      <van-nav-bar class="reg-bar" title="忘记密码" left-arrow  @click-left="$router.back()"/>
    </div>
    <!-- 输入手机号，调起手机号键盘 -->
    <van-form  ref="regForm">
    <van-field 
      v-model="username"
      type="tel"
      name="tel"
      :rules="[
        { required: true, },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
      ]"
      placeholder="请输入手机号"
    />
    <van-field v-model="password" type="password" placeholder="请输入新密码" />
    <van-field v-model="vercode" center clearable placeholder="请输入短信验证码" :rules="[
        { required: true,  },
        { pattern: /^\d{6}$/, message: '验证码格式错误' },
      ]">
      <template #button>
        <van-button :disabled="codeBtnDisabled" native-type="button"  class="reg-btn1" @click="getCode()">{{code_text}}</van-button>
      </template>
    </van-field>
    <div class="reg-btn2">
      <van-button type="primary" @click="forGet()" >确认</van-button>
    </div>
    </van-form>
    
  </div>
</template>

<script>
import {forGet} from "@/api/api";
import {sendSms} from "@/api/api";
import { Toast } from 'vant';

export default {
data(){
    return {
      username: "",
      vercode: "",
      password: "",
      code_text:"发送验证码",
      codeBtnDisabled:false,
    }
},
mounted(){
    // this.forGet()
},
methods:{


    //忘记密码
    forGet(){
        let {username,password,vercode} = this;
        forGet(
            {username,password,vercode}
        ).then(res=>{
            console.log(res);
            if(res.data.code==0){
                Toast(res.data.msg)
            }else{
                Toast(res.data.msg)
            }
        })
    },

    // //发送验证码
    // sendSms(){
    //     sendSms(
    //         {mobile:this.username,type:'login'}
    //         ).then(res=>{
    //             console.log(res)
    //         })
    // }




    //验证码
     async getCode() {

      try{
        let validate_res=await this.$refs.regForm.validate("tel");
        console.log(validate_res)

         this.codeBtnDisabled=true
         this.code_text="发送中..."

        
        sendSms(
            {mobile:this.username,type:'login'}
            ).then((v)=>{
                console.log(v);
          if(v.data.code==0){
            //发送成功
            this.$toast(`短信已发送到手机号${this.username},请注意查收`)

            let count=60

           let timer =setInterval(()=>{
            count--;
           this.code_text=`${count}s后再次获取`;
           if(count<=0){
            clearInterval(timer);
            this.code_text=`再次发送`
            this.codeBtnDisabled=false
            count=60
           }
            },1000)

          }else{
            this.$toast(v.data.msg||'发送失败')
          this.codeBtnDisabled=false
         this.code_text="再次发送"
          }
        }).catch(err=>{

          console.log(err)

          this.$toast(err.data.msg||'发送失败')
          this.codeBtnDisabled=false
         this.code_text="再次发送"
        });
      }catch(e){

      }

      
    },

}
}
</script>

<style>
.reg {
  position: relative;
}

.reg-btn2 {
  position: absolute;
  left: 13px;
}
.reg-btn2 button {
  width: 350px;
  text-align: center;
}
.reg-bar {
  background: #07c060;
}
.reg-btn1 {
  border-radius: 50px;
  height: 20px;
  width: 105px;
  background: #f5f6f7;
}
.van-nav-bar__title {
  color: white;
}
</style>